body {
    --dds-color-blue-10: #ddf3fc;
    --dds-color-blue-20: #bbe7f9;
    --dds-color-blue-30: #98dbf7;
    --dds-color-blue-40: #76cff4;
    --dds-color-blue-50: #54c3f1;
    --dds-color-blue-60: #30ade9;
    --dds-color-blue-70: #0097e0;
    --dds-color-blue-80: #0081c0;
    --dds-color-blue-90: #00689a;
    --dds-color-blue-100: #005077;
    --dds-color-blue-110: #004160;
    --dds-color-blue-120: #002b40;
    --dds-color-green-10: #ccfef8;
    --dds-color-green-20: #9bfaef;
    --dds-color-green-30: #6cf5e4;
    --dds-color-green-40: #3bf1dc;
    --dds-color-green-50: #13e5cc;
    --dds-color-green-60: #00c3ac;
    --dds-color-green-70: #008f7e;
    --dds-color-green-80: #007b6c;
    --dds-color-green-90: #00665a;
    --dds-color-green-100: #005248;
    --dds-color-green-110: #003d36;
    --dds-color-green-120: #002924;
    --dds-color-yellow-10: #fff4d7;
    --dds-color-yellow-20: #ffeaaf;
    --dds-color-yellow-30: #ffd45f;
    --dds-color-yellow-40: #ffc936;
    --dds-color-yellow-50: #ffbf0e;
    --dds-color-yellow-60: #efb000;
    --dds-color-yellow-70: #b88700;
    --dds-color-yellow-80: #9e7400;
    --dds-color-yellow-90: #836000;
    --dds-color-yellow-100: #694d00;
    --dds-color-yellow-110: #4f3a00;
    --dds-color-yellow-120: #352700;
    --dds-color-orange-10: #feead9;
    --dds-color-orange-20: #fcd4b3;
    --dds-color-orange-30: #fbbf8e;
    --dds-color-orange-40: #ff9c4b;
    --dds-color-orange-50: #fd8b2e;
    --dds-color-orange-60: #fa7a12;
    --dds-color-orange-70: #e46b08;
    --dds-color-orange-80: #b45100;
    --dds-color-orange-90: #964400;
    --dds-color-orange-100: #783600;
    --dds-color-orange-110: #5a2900;
    --dds-color-orange-120: #3c1b00;
    --dds-color-red-10: #fdd9db;
    --dds-color-red-20: #fbb3b7;
    --dds-color-red-30: #f98d93;
    --dds-color-red-40: #f7666f;
    --dds-color-red-50: #f4404b;
    --dds-color-red-60: #f21a27;
    --dds-color-red-70: #d80c18;
    --dds-color-red-80: #b90a15;
    --dds-color-red-90: #9a0911;
    --dds-color-red-100: #7b070e;
    --dds-color-red-110: #5d050a;
    --dds-color-red-120: #3e0307;
    --dds-color-gray-10: #f2f2f2;
    --dds-color-gray-20: #ebebeb;
    --dds-color-gray-30: #dcdcdc;
    --dds-color-gray-40: #cecece;
    --dds-color-gray-50: #bfbfbf;
    --dds-color-gray-60: #a0a0a0;
    --dds-color-gray-70: #828282;
    --dds-color-gray-80: #616161;
    --dds-color-gray-90: #515151;
    --dds-color-gray-100: #414141;
    --dds-color-gray-110: #313131;
    --dds-color-gray-120: #212121;
    --dds-color-black: #000000;
    --dds-color-white: #ffffff;
    --dds-color-blue-gray-10: #eef0f2;
    --dds-color-blue-gray-20: #d8dde0;
    --dds-color-blue-gray-30: #bbc1c7;
    --dds-color-blue-gray-40: #a4acb4;
    --dds-color-blue-gray-50: #8d98a1;
    --dds-color-blue-gray-60: #76838e;
    --dds-color-blue-gray-70: #636e78;
    --dds-color-blue-gray-80: #505961;
    --dds-color-blue-gray-90: #444b52;
    --dds-color-blue-gray-100: #30353a;
    --dds-color-blue-gray-110: #282c30;
    --dds-color-blue-gray-120: #1b1e21;
    --dds-color-dark-gray-105: #383838;
    --dds-color-dark-gray-115: #282828;
    --dds-color-dark-gray-125: #1a1a1a;
    --dds-color-purple-10: #f0ddf3;
    --dds-color-purple-20: #e1bbe8;
    --dds-color-purple-30: #d399dc;
    --dds-color-purple-40: #c477d0;
    --dds-color-purple-50: #b556c5;
    --dds-color-purple-60: #a03db0;
    --dds-color-purple-70: #81318e;
    --dds-color-purple-80: #6f2a7a;
    --dds-color-purple-90: #5c2365;
    --dds-color-purple-100: #4a1c51;
    --dds-color-purple-110: #37153d;
    --dds-color-purple-120: #250e29;
    --dds-color-common-brand-default: #0097e0;
    --dds-color-common-brand-hover: #0081c0;
    --dds-color-common-brand-press: #00689a;
    --dds-color-common-surface-brand-hover: #ddf3fc;
    --dds-color-common-surface-brand-press: #bbe7f9;
    --dds-color-common-surface-neutral-hover: #f2f2f2;
    --dds-color-common-surface-neutral-press: #ebebeb;
    --dds-color-common-surface-danger-hover: #fdd9db;
    --dds-color-common-surface-danger-press: #fbb3b7;
    --dds-color-common-surface-default: #ffffff;
    --dds-color-common-surface-inverse: #616161;
    --dds-color-common-surface-hover: #f2f2f2;
    --dds-color-common-surface-press: #ebebeb;
    --dds-color-common-surface-selected-default: #ddf3fc;
    --dds-color-common-surface-selected-hover: #bbe7f9;
    --dds-color-common-surface-selected-press: #98dbf7;
    --dds-color-common-neutral-default: #616161;
    --dds-color-common-neutral-hover: #515151;
    --dds-color-common-neutral-press: #414141;
    --dds-color-common-danger-default: #d80c18;
    --dds-color-common-danger-hover: #b90a15;
    --dds-color-common-danger-press: #9a0911;
    --dds-color-common-success: #008f7e;
    --dds-color-common-warning: #b88700;
    --dds-color-common-alarm: #e46b08;
    --dds-color-common-information: #0097e0;
    --dds-color-common-disabled: #bfbfbf;
    --dds-color-common-text-primary: #414141;
    --dds-color-common-text-secondary: #616161;
    --dds-color-common-text-inverse: #ffffff;
    --dds-color-common-border-focus: #0081c0;
    --dds-color-common-border-empty: #cecece;
    --dds-color-common-background-default: #ffffff;
    --dds-color-common-background-overlay: #000000;
    --dds-color-divider: #cecece;
    --dds-color-link-text-default: #00689a;
    --dds-color-link-text-hover: #005077;
    --dds-color-link-text-press: #004160;
    --dds-color-link-text-visited-default: #5c2365;
    --dds-color-link-text-visited-hover: #4a1c51;
    --dds-color-link-text-visited-press: #37153d;
    --dds-color-link-surface-visited-hover: #f0ddf3;
    --dds-color-link-surface-visited-press: #e1bbe8;
    --dds-border-radius-100: 4px;
    --dds-border-radius-150: 6px;
    --dds-border-radius-200: 8px;
    --dds-border-radius-250: 10px;
    --dds-border-radius-300: 12px;
    --dds-border-radius-400: 16px;
    --dds-border-radius-050: 2px;
    --dds-border-width-100: 4px;
    --dds-border-width-025: 1px;
    --dds-border-width-050: 2px;
    --dds-space-100: 4px;
    --dds-space-200: 8px;
    --dds-space-300: 12px;
    --dds-space-400: 16px;
    --dds-space-800: 32px;
    --dds-space-050: 2px;
    --dds-font-regular-normal-300: 400 12px/1.5 Roboto;
    --dds-font-regular-normal-350: 400 14px/1.5 Roboto;
    --dds-font-regular-normal-400: 400 16px/1.5 Roboto;
    --dds-font-regular-tight-300: 400 12px/1.3 Roboto;
    --dds-font-regular-tight-350: 400 14px/1.3 Roboto;
    --dds-font-regular-tight-400: 400 16px/1.3 Roboto;
    --dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
    --dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
    --dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
    --dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
    --dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
    --dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
    --dds-font-size-300: 12px;
    --dds-font-size-350: 14px;
    --dds-font-size-400: 16px;
    --dds-font-line-height-tight: 1.3;
    --dds-font-line-height-normal: 1.5;
    --dds-font-weight-bold: 700;
    --dds-font-weight-regular: 400;
    --dds-font-family-base: Roboto
}

    body[data-theme=dark] {
        --dds-color-blue-10: #ddf3fc;
        --dds-color-blue-20: #bbe7f9;
        --dds-color-blue-30: #98dbf7;
        --dds-color-blue-40: #76cff4;
        --dds-color-blue-50: #54c3f1;
        --dds-color-blue-60: #30ade9;
        --dds-color-blue-70: #0097e0;
        --dds-color-blue-80: #0081c0;
        --dds-color-blue-90: #00689a;
        --dds-color-blue-100: #005077;
        --dds-color-blue-110: #004160;
        --dds-color-blue-120: #002b40;
        --dds-color-green-10: #ccfef8;
        --dds-color-green-20: #9bfaef;
        --dds-color-green-30: #6cf5e4;
        --dds-color-green-40: #3bf1dc;
        --dds-color-green-50: #13e5cc;
        --dds-color-green-60: #00c3ac;
        --dds-color-green-70: #008f7e;
        --dds-color-green-80: #007b6c;
        --dds-color-green-90: #00665a;
        --dds-color-green-100: #005248;
        --dds-color-green-110: #003d36;
        --dds-color-green-120: #002924;
        --dds-color-yellow-10: #fff4d7;
        --dds-color-yellow-20: #ffeaaf;
        --dds-color-yellow-30: #ffd45f;
        --dds-color-yellow-40: #ffc936;
        --dds-color-yellow-50: #ffbf0e;
        --dds-color-yellow-60: #efb000;
        --dds-color-yellow-70: #b88700;
        --dds-color-yellow-80: #9e7400;
        --dds-color-yellow-90: #836000;
        --dds-color-yellow-100: #694d00;
        --dds-color-yellow-110: #4f3a00;
        --dds-color-yellow-120: #352700;
        --dds-color-orange-10: #feead9;
        --dds-color-orange-20: #fcd4b3;
        --dds-color-orange-30: #fbbf8e;
        --dds-color-orange-40: #ff9c4b;
        --dds-color-orange-50: #fd8b2e;
        --dds-color-orange-60: #fa7a12;
        --dds-color-orange-70: #e46b08;
        --dds-color-orange-80: #b45100;
        --dds-color-orange-90: #964400;
        --dds-color-orange-100: #783600;
        --dds-color-orange-110: #5a2900;
        --dds-color-orange-120: #3c1b00;
        --dds-color-red-10: #fdd9db;
        --dds-color-red-20: #fbb3b7;
        --dds-color-red-30: #f98d93;
        --dds-color-red-40: #f7666f;
        --dds-color-red-50: #f4404b;
        --dds-color-red-60: #f21a27;
        --dds-color-red-70: #d80c18;
        --dds-color-red-80: #b90a15;
        --dds-color-red-90: #9a0911;
        --dds-color-red-100: #7b070e;
        --dds-color-red-110: #5d050a;
        --dds-color-red-120: #3e0307;
        --dds-color-gray-10: #f2f2f2;
        --dds-color-gray-20: #ebebeb;
        --dds-color-gray-30: #dcdcdc;
        --dds-color-gray-40: #cecece;
        --dds-color-gray-50: #bfbfbf;
        --dds-color-gray-60: #a0a0a0;
        --dds-color-gray-70: #828282;
        --dds-color-gray-80: #616161;
        --dds-color-gray-90: #515151;
        --dds-color-gray-100: #414141;
        --dds-color-gray-110: #313131;
        --dds-color-gray-120: #212121;
        --dds-color-black: #000000;
        --dds-color-white: #ffffff;
        --dds-color-blue-gray-10: #eef0f2;
        --dds-color-blue-gray-20: #d8dde0;
        --dds-color-blue-gray-30: #bbc1c7;
        --dds-color-blue-gray-40: #a4acb4;
        --dds-color-blue-gray-50: #8d98a1;
        --dds-color-blue-gray-60: #76838e;
        --dds-color-blue-gray-70: #636e78;
        --dds-color-blue-gray-80: #505961;
        --dds-color-blue-gray-90: #444b52;
        --dds-color-blue-gray-100: #30353a;
        --dds-color-blue-gray-110: #282c30;
        --dds-color-blue-gray-120: #1b1e21;
        --dds-color-dark-gray-105: #383838;
        --dds-color-dark-gray-115: #282828;
        --dds-color-dark-gray-125: #1a1a1a;
        --dds-color-purple-10: #f0ddf3;
        --dds-color-purple-20: #e1bbe8;
        --dds-color-purple-30: #d399dc;
        --dds-color-purple-40: #c477d0;
        --dds-color-purple-50: #b556c5;
        --dds-color-purple-60: #a03db0;
        --dds-color-purple-70: #81318e;
        --dds-color-purple-80: #6f2a7a;
        --dds-color-purple-90: #5c2365;
        --dds-color-purple-100: #4a1c51;
        --dds-color-purple-110: #37153d;
        --dds-color-purple-120: #250e29;
        --dds-color-common-brand-default: #30ade9;
        --dds-color-common-brand-hover: #54c3f1;
        --dds-color-common-brand-press: #76cff4;
        --dds-color-common-surface-brand-hover: #002b40;
        --dds-color-common-surface-brand-press: #004160;
        --dds-color-common-surface-neutral-hover: #282828;
        --dds-color-common-surface-neutral-press: #313131;
        --dds-color-common-surface-danger-hover: #3e0307;
        --dds-color-common-surface-danger-press: #5d050a;
        --dds-color-common-surface-default: #212121;
        --dds-color-common-surface-inverse: #ffffff;
        --dds-color-common-surface-hover: #282828;
        --dds-color-common-surface-press: #313131;
        --dds-color-common-surface-selected-default: #002b40;
        --dds-color-common-surface-selected-hover: #004160;
        --dds-color-common-surface-selected-press: #005077;
        --dds-color-common-neutral-default: #bfbfbf;
        --dds-color-common-neutral-hover: #cecece;
        --dds-color-common-neutral-press: #dcdcdc;
        --dds-color-common-danger-default: #f21a27;
        --dds-color-common-danger-hover: #f4404b;
        --dds-color-common-danger-press: #f7666f;
        --dds-color-common-success: #00c3ac;
        --dds-color-common-warning: #efb000;
        --dds-color-common-alarm: #fa7a12;
        --dds-color-common-information: #30ade9;
        --dds-color-common-disabled: #616161;
        --dds-color-common-text-primary: #dcdcdc;
        --dds-color-common-text-secondary: #bfbfbf;
        --dds-color-common-text-inverse: #212121;
        --dds-color-common-border-focus: #54c3f1;
        --dds-color-common-border-empty: #515151;
        --dds-color-common-background-default: #212121;
        --dds-color-common-background-overlay: #000000;
        --dds-color-divider: #515151;
        --dds-color-link-text-default: #76cff4;
        --dds-color-link-text-hover: #98dbf7;
        --dds-color-link-text-press: #bbe7f9;
        --dds-color-link-text-visited-default: #c477d0;
        --dds-color-link-text-visited-hover: #d399dc;
        --dds-color-link-text-visited-press: #e1bbe8;
        --dds-color-link-surface-visited-hover: #250e29;
        --dds-color-link-surface-visited-press: #37153d;
        --dds-border-radius-100: 4px;
        --dds-border-radius-150: 6px;
        --dds-border-radius-200: 8px;
        --dds-border-radius-250: 10px;
        --dds-border-radius-300: 12px;
        --dds-border-radius-400: 16px;
        --dds-border-radius-050: 2px;
        --dds-border-width-100: 4px;
        --dds-border-width-025: 1px;
        --dds-border-width-050: 2px;
        --dds-space-100: 4px;
        --dds-space-200: 8px;
        --dds-space-300: 12px;
        --dds-space-400: 16px;
        --dds-space-800: 32px;
        --dds-space-050: 2px;
        --dds-font-regular-normal-300: 400 12px/1.5 Roboto;
        --dds-font-regular-normal-350: 400 14px/1.5 Roboto;
        --dds-font-regular-normal-400: 400 16px/1.5 Roboto;
        --dds-font-regular-tight-300: 400 12px/1.3 Roboto;
        --dds-font-regular-tight-350: 400 14px/1.3 Roboto;
        --dds-font-regular-tight-400: 400 16px/1.3 Roboto;
        --dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
        --dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
        --dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
        --dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
        --dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
        --dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
        --dds-font-size-300: 12px;
        --dds-font-size-350: 14px;
        --dds-font-size-400: 16px;
        --dds-font-line-height-tight: 1.3;
        --dds-font-line-height-normal: 1.5;
        --dds-font-weight-bold: 700;
        --dds-font-weight-regular: 400;
        --dds-font-family-base: Roboto
    }